<template>
    <div class="page-wrap">
        <div class="page-title">CdsPageSearch</div>
        <div class="page-sub-title">基础用法</div>
        <div>
            <CdsPageSearch :maxColumus="4" show-advanced @changeAdvance="changeAdvance">
                <template v-slot:basicLeft>
                    <el-input></el-input>
                    <el-input></el-input>
                    <el-input></el-input>
                </template>
                <template v-slot:right>
                    <el-button type="text">筛选时间</el-button>
                    <el-button type="text">批量操作</el-button>
                    <el-button type="text">切换列表</el-button>
                    <el-button type="text">设置</el-button>
                    <el-button type="text">标签</el-button>
                    <el-button type="text">刷新</el-button>
                    <el-button type="text">导出</el-button>
                </template>
                <template v-slot:advanceForm>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段1:</div>
            <el-input style="flex: 1"></el-input>
          </span>
                    <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段2:</div>
            <el-input style="flex: 1"></el-input>
          </span>
                    <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段3:</div>
            <el-input style="flex: 1"></el-input>
          </span>
                    <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段4:</div>
            <el-input style="flex: 1"></el-input>
          </span>
                    <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段5:</div>
            <el-input style="flex: 1"></el-input>
          </span>
                    <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段6:</div>
            <el-input style="flex: 1"></el-input>
          </span>
                    <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段7:</div>
            <el-input style="flex: 1"></el-input>
          </span>
                    <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段8:</div>
            <el-input style="flex: 1"></el-input>
          </span>
                    <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段9:</div>
            <el-input style="flex: 1"></el-input>
          </span>
                    <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段10:</div>
            <el-input style="flex: 1"></el-input>
          </span>
                    <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段11:</div>
            <el-input style="flex: 1"></el-input>
          </span>
                    <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段12:</div>
            <el-input style="flex: 1"></el-input>
          </span>
                    <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段13:</div>
            <el-input style="flex: 1"></el-input>
          </span>
                    <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段14:</div>
            <el-input style="flex: 1"></el-input>
          </span>
                
                </template>
                <template v-slot:advanceLeft>
                    <el-button type="primary">确定</el-button>
                    <el-button>清空</el-button>
                </template>
            
            </CdsPageSearch>
            <highlightjs
                language="shell"
                :code="code"
            />
            <div class="page-sub-title">Attributes</div>
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="field"
                    label="参数">
                </el-table-column>
                <el-table-column
                    prop="desc"
                    label="说明">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="类型">
                </el-table-column>
                <el-table-column
                    prop="available"
                    label="可选值">
                </el-table-column>
                <el-table-column
                    prop="default"
                    label="默认值">
                </el-table-column>
            </el-table>
            <div class="page-sub-title">插槽</div>
            <el-table
                :data="tableData2"
                style="width: 100%">
                <el-table-column
                    prop="field"
                    label="插槽名">
                </el-table-column>
                <el-table-column
                    prop="desc"
                    label="说明">
                </el-table-column>
            </el-table>
            <div class="page-sub-title">Events</div>
            <el-table
                :data="tableData3"
                style="width: 100%">
                <el-table-column
                    prop="field"
                    label="方法名">
                </el-table-column>
                <el-table-column
                    prop="desc"
                    label="说明">
                </el-table-column>
                <el-table-column
                    prop="params"
                    label="回调参数">
                </el-table-column>
            </el-table>
        </div>
    </div>


</template>

<script setup>
import {CdsPageSearch} from 'cds-ui-business-components'
const tableData = [
    {field: 'maxColumus', desc: '最大显示列数', type: 'Number', available: '--', default: 4},
    {field: 'maxHeight', desc: '高级检索的表单区域最大高度', type: 'String', available: '--', default: 'none'},
    {field: 'showAdvanced', desc: '是否支持高级搜索', type: 'Boolean', available: 'true/false', default: 'false'},
]
const tableData2 = [
    {field: 'basicLeft', desc: '基础搜索状态下的左侧插槽'},
    {field: 'right', desc: '右侧插槽'},
    {field: 'advanceForm', desc: '高级搜索状态下的表单区域插槽'},
    {field: 'advanceLeft', desc: '高级搜索状态下的左侧插槽'},
]
const tableData3 = [
    {field: 'change', desc: '首次加载组件，或切换检索状态时触发', params: '当前是否是高级检索， true为是，false为否'},
]
const code = `
<template>
<CdsPageSearch  :maxColumus="4" show-advanced @change="handleChange">
        <template v-slot:basicLeft>
          <el-input ></el-input>
          <el-input ></el-input>
          <el-input ></el-input>
        </template>
        <template v-slot:right>
          <el-button type="text">筛选时间</el-button>
          <el-button type="text">批量操作</el-button>
          <el-button type="text">切换列表</el-button>
          <el-button type="text">设置</el-button>
          <el-button type="text">标签</el-button>
          <el-button type="text">刷新</el-button>
          <el-button type="text">导出</el-button>
        </template>
        <template v-slot:advanceForm>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段1:</div>
            <el-input style="flex: 1"></el-input>
          </span>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段2:</div>
            <el-input style="flex: 1"></el-input>
          </span>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段3:</div>
            <el-input style="flex: 1"></el-input>
          </span>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段4:</div>
            <el-input style="flex: 1"></el-input>
          </span>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段5:</div>
            <el-input style="flex: 1"></el-input>
          </span>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段6:</div>
            <el-input style="flex: 1"></el-input>
          </span>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段7:</div>
            <el-input style="flex: 1"></el-input>
          </span>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段8:</div>
            <el-input style="flex: 1"></el-input>
          </span>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段9:</div>
            <el-input style="flex: 1"></el-input>
          </span>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段10:</div>
            <el-input style="flex: 1"></el-input>
          </span>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段11:</div>
            <el-input style="flex: 1"></el-input>
          </span>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段12:</div>
            <el-input style="flex: 1"></el-input>
          </span>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段13:</div>
            <el-input style="flex: 1"></el-input>
          </span>
          <span style="display: flex">
            <div style="width: 100px;align-self: center;">字段14:</div>
            <el-input style="flex: 1"></el-input>
          </span>
          
        </template>
        <template v-slot:advanceLeft>
          <el-button type="primary">确定</el-button>
          <el-button>清空</el-button>
        </template>
  
      </CdsPageSearch>
</template>

`
const changeAdvance = (val)=>{

}

</script>

<style scoped>

</style>
